<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>缺陷猎手大比拼</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/style_ypp.css" />
    <link rel="stylesheet" href="css/custom_animate.css">
    <style>
      .timer {
        padding: 200px;
            font-size: 18rem;
            text-align: center;
            font-weight: bold;
            color: white;
            text-shadow: 
                0 0 5px #fff,
                0 0 10px #fff,
                0 0 20px #0ca6e6,
                0 0 30px #0ca6e6,
                0 0 40px #0ca6e6;
            animation: glow 1.5s infinite alternate;
        }

        @keyframes glow {
            from {
                text-shadow: 
                    0 0 5px #fff,
                    0 0 10px #fff,
                    0 0 20px #0ca6e6,
                    0 0 30px #0ca6e6;
            }
            to {
                text-shadow: 
                    0 0 10px #fff,
                    0 0 20px #fff,
                    0 0 30px #0ca6e6,
                    0 0 40px #0ca6e6,
                    0 0 50px #0ca6e6;
            }
        }

        /* 时间到样式 */
        .time-up {
            color: red;
            text-shadow: 
                0 0 10px #ff0000,
                0 0 20px #ff0000,
                0 0 30px #ff0000;
            animation: none;
        }
    </style>
  </head>
  <body>
    <!-- 头 -->
    <div class="title">
      <h1><a href="../index.html">缺陷猎手大比拼</a></h1>
    </div>
    <div class="nav_bar">
      <div class="nav">
        <div class="timer" id="countdown">04:00</div>
      </div>
    </div>
  </body>
  <script src="js/jQuery.min.js"></script>
  <script type="text/javascript" src="js/echarts.min.js"></script>
  <script>
    let timeLeft = 240; // 4分钟 = 240秒
    const countdownElement = document.getElementById("countdown");

    function updateTimer() {
        const minutes = Math.floor(timeLeft / 60);
        const seconds = timeLeft % 60;
        
        const displayTime = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
        countdownElement.textContent = displayTime;

        if (timeLeft <= 0) {
            clearInterval(timerInterval);
            countdownElement.textContent = "时间到！";
            countdownElement.classList.add("time-up");
            
            // 闪烁红色警告
            setTimeout(() => alert("⏰ 4分钟倒计时结束！"), 500);
        } else {
            timeLeft--;
        }
    }

    const timerInterval = setInterval(updateTimer, 1000);
</script>
</html>
